<template>
  <div class="time-picker-example">
    <div class="time-range" :class="[`time-range--${pickerEffect}`]">
      <h4 class="text-center">日期时间范围选择器</h4>
      <div>
        切换主题色:
        <el-switch v-model="pickerEffect" active-text="暗黑主题" active-value="dark" inactive-text="高亮主题" inactive-value="light"></el-switch>
      </div>

      <p>选择的日期范围是: <span v-if="timeRange.length > 0">{{ timeRange[0] }} ~ {{ timeRange[1] }}</span></p>

      <base-time-range-picker
        v-model="timeRange"
        :default-time-range="defaultTimeRange"
        size="mini"
        :must-check="false"
        :effect="pickerEffect"
        :shortcuts="[
          { value: '1d', label: '近1天' },
          { value: '7d', label: '近7天' },
          { value: '15d', label: '近15天' },
          { value: '30d', label: '近30天' },
          { value: 'export', label: '导出' },
        ]"
        @pick="onTimeRangePick"
      ></base-time-range-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: 'time-picker-example',
  data() {
    return {
      pickerEffect: 'light', // dark | light
      timeRange: [],
      defaultTimeRange: [],
    };
  },
  mounted() {
    this.setDefaultTime();
  },
  methods: {
    /**
     * 设置默认时间
     */
    setDefaultTime() {
      const defaultTime = this.$moment().format('YYYY-MM-DD HH:mm:ss');
      const before = this.$moment(defaultTime).subtract(40, 'minute').format('YYYY-MM-DD HH:mm:ss'); // 当前时间的前40分钟
      const after = this.$moment(defaultTime).add(20, 'minute').format('YYYY-MM-DD HH:mm:ss'); // 当前时间的后20分钟
      this.timeRange = [before, after];
      this.defaultTimeRange = [before, after];
    },

    onTimeRangePick(record) {
      console.log('time range pick => ', JSON.parse(JSON.stringify(record)));
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/design/_colors.scss";

.time-picker-example {
  width: 100%;
  height: 100%;

  .time-range {
    width: 600px;
    border: 1px solid $color-border-dark;
    border-radius: 4px;
    padding: 0 12px 12px;

    &--light {
      ::v-deep .el-switch {
        &__label:not(.is-active) {
          color: #000;
        }
      }
    }

    &--dark {
      background: rgba(3, 16, 33, 0.85);
      color: #fff;

      ::v-deep .el-switch {
        &__label:not(.is-active) {
          color: #fff;
        }
      }
    }
  }
}
</style>
